<template>
  <div style="background-image: url(http://localhost:9090/files/刀妹.jpg);background-size: cover;background-repeat: repeat;background-position: -250px 0">
    <div style="margin: 10px 400px;padding: 50px;background-color: #ffffff;opacity: 0.9;">

      <div v-for="item in books" :key="item.id" style="border-bottom: 1px solid #CCC; padding: 10px 0; display: flex">
        <div style=" padding: 5px 0; line-height: 25px;" >
          <img :src="item.cover" style="max-width:200px; max-height: 300px" @click="detail({id:item.id})" />
        </div>
        <div style=" margin: 5px 50px; line-height: 25px;">
          <b style="font-size: 25px;">{{ item.name }}</b><br>
          <b style="font-size: 20px;">作者:{{ item.author }}</b><br>
          <b style="font-size: 15px;">出版时间:{{ item.createtime }}</b>&nbsp;&nbsp;&nbsp;
          <b style="font-size: 15px;">出版社:{{ item.publish }}</b><br>
          <b style="font-size: 20px;">价格:</b><b style="font-size: 30px;color: #c04851">{{ item.price }}</b><br>
          <b style="font-size: 20px;">类型:{{ item.type }}</b><br>
          <b style="font-size: 20px;">简介:</b><br>
          <b style="width: 700px;
		 /* 裁剪多余的 */
		 overflow : hidden;
		 /* 多余的以省略号出现 */
		 text-overflow: ellipsis;
		 /* 将对象作为弹性伸缩盒子模型显示 */
		 display: -webkit-box;
		 /* 限制再一个块元素再文本显示的行数 */
		 -webkit-line-clamp: 3;
		 /* 设置或检索伸缩盒对象的子元素的排列方式 */
		 -webkit-box-orient: vertical;" v-html="item.synopsis" ></b>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "../../utils/request";
export default {
  name: "Type",
  data() {
    return {
      books:[]
    }
  },
  created() {
    this.load()
  },
  methods:{
    detail(row) {
      //查看详情
      this.$router.push({ path: "mediaContent/" + row.id });
    },
    load() {
      request.get("/api/book/classify/科幻").then(res => {
        console.log(res)
        this.books = res.data
      })
    }
  }
}
</script>

<style scoped>
img:hover{
  cursor: pointer;
}
</style>